<template>
    <div class="allposition">
        <!--    <checkbox></checkbox>-->
        <div class="checkbox">
            <div>
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item>
                        <el-select v-model="select" placeholder="请选择">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-input
                                placeholder="请输入内容"
                                v-model="input"
                                clearable>
                        </el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                    </el-form-item>
                </el-form>
            </div>

        </div>
        <navmenu></navmenu>
        <!--    <search></search>-->
        <div class="query-color">
            <div class="query-search">
                <div class="block">
                    <el-form :inline="true" class="demo-form-inline">
                        <el-form-item>
                            <el-select v-model="jobAddress" placeholder="选择地址" style="width: 250px" clearable>
                                <el-option-group
                                        v-for="group in options2"
                                        :key="group.label"
                                        :label="group.label">
                                    <el-option
                                            v-for="item in group.options2"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-option-group>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-cascader style="width: 300px"
                                         v-model="jobIndustry"
                                         placeholder="行业"
                                         :options="options3"
                                         filterable
                                         clearable>
                            </el-cascader>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="searchMix">搜索</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <el-divider class="divider"></el-divider>
                <div class="block3">
                    <div style=" display: flex; flex-direction: row; justify-content: flex-start;">
                        <span class="demonstration">月薪：</span>
                        <b-form-group>
                            <b-form-radio-group
                                    id="radio-group-1"
                                    v-model="jobPay"
                                    :options="options4"
                                    name="radio-options"
                                    @change="handle"
                            ></b-form-radio-group>
                        </b-form-group>
                    </div>
                </div>

            </div>
        </div>
        <!--    <showjob></showjob>-->
        <div class="showjob-color">
            <div>
                <el-tabs type="border-card" class="showjob">
                    <el-tab-pane label="智能匹配"></el-tab-pane>
                    <el-tab-pane label="薪资最高"></el-tab-pane>
                    <el-tab-pane label="最新发布"></el-tab-pane>
                    <el-table
                            ref="multipleTable"
                            :data="tableData1"
                            tooltip-effect="dark"
                            @selection-change="handleSelectionChange"
                            style="width: 100%">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                prop="jobName"
                                label="职位">
                        </el-table-column>
                        <el-table-column
                                prop="jobIndustry"
                                label="行业">
                        </el-table-column>
                        <el-table-column
                                prop="jobPay"
                                label="薪资">
                        </el-table-column>
                        <el-table-column
                                prop="jobAddress"
                                label="工作地点">
                        </el-table-column>
                        <el-table-column
                                prop="jobEdu"
                                label="学历">
                        </el-table-column>
                        <el-table-column
                                prop="jobExpr"
                                label="经验">
                        </el-table-column>
                        <el-table-column
                                prop="jobCompany"
                                label="公司">
                        </el-table-column>
                        <el-table-column
                                prop="jobDate"
                                label="发布时间"
                                :formatter="dateFormatter">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                width="200"
                                fixed="right">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        type="success"
                                        @click="add(scope.$index, scope.row)">收藏
                                </el-button>
                                <el-button
                                        size="mini"
                                        type="info"
                                        @click="apply(scope.$index, scope.row)">申请职位
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tabs>
            </div>
        </div>
    </div>
</template>

<script>
    import navmenu from '@/components/navmenu'

    export default {
        name: 'allposition',
        components: {
            navmenu
        },
        methods: {
            searchMix() {
                console.log(this.jobPay, this.jobAddress, this.jobIndustry)
                var params = new URLSearchParams();
                params.append('jobaddress', this.jobAddress)
                params.append('jobindustry', this.jobIndustry)
                params.append('jobpay',this.jobPay)
                this.axios.post('http://localhost:8001/compjob/searchByMix', params).then((res) => {
                    // console.log(res.data.msg);
                    this.tableData1 = res.data
                }).catch((err) => {
                    console.log('error' + err);
                })
            },
            dateFormatter (row) {
                let datetime = row.jobDate;
                if (datetime) {
                    datetime = new Date(datetime);
                    let y = datetime.getFullYear() + '-';
                    let mon = datetime.getMonth() + 1 + '-';
                    let d = datetime.getDate();
                    return y + mon + d;
                }
                return ''
            },
            search() {
                var params = new URLSearchParams();
                params.append('select', this.select)
                params.append('input', this.input)
                this.axios.post('http://localhost:8001/compjob/search', params).then((res) => {
                    // console.log(res.data.msg);
                    this.tableData1 = res.data
                    console.log(this.$store.state.tableData1)
                }).catch((err) => {
                    console.log('error' + err);
                })
            },
            add(index, row) {
                var params = new URLSearchParams();
                params.append('jobid', row.jobId)
                params.append('userid', this.$store.state.user)
                this.axios.post('http://localhost:8001/userfavorites/add', params).then((res) => {
                    if (res.data.status === 200) {
                        // alert('账号或密码错误');
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: 'error'
                        });
                    }
                }).catch((err) => {
                    this.$message({
                        showClose: true,
                        message: '请先用户登录',
                        type: 'error'
                    });
                    console.log('error' + err);
                })
            },
            apply(index, row) {
                var params = new URLSearchParams();
                params.append('jobid', row.jobId)
                params.append('compid', row.compId)
                params.append('userid', this.$store.state.user)
                console.log(this.$store.state.user)
                this.axios.post('http://localhost:8001/compReResume/add', params).then((res) => {
                    if (res.data.status === 200) {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: 'error'
                        });
                    }
                }).catch((err) => {
                    this.$message({
                        showClose: true,
                        message: '请先用户登录',
                        // message: res.data.msg,
                        type: 'error'
                    });
                    console.log('error' + err);
                })
            }
        },
        mounted() {
            this.axios.get('http://localhost:8001/compjob/getjobs').then((res) => {
                console.log(res.data);
                this.tableData1 = res.data;
            })
        },
        data() {
            return {
                tableData1: [],
                multipleSelection: [],
                jobAddress: '',
                jobIndustry: '',
                jobPay: '',
                input: '',
                select: '',
                options: [{
                    value: '职位',
                    label: '职位'
                }, {
                    value: '公司',
                    label: '公司'
                }
                ],
                value: '',

                options2: [{
                    label: '热门城市',
                    options2: [{
                        value: '上海',
                        label: '上海'
                    }, {
                        value: '北京',
                        label: '北京'
                    }]
                }, {
                    label: '城市名',
                    options2: [{
                        value: '成都',
                        label: '成都'
                    }, {
                        value: '深圳',
                        label: '深圳'
                    }, {
                        value: '广州',
                        label: '广州'
                    }, {
                        value: '大连',
                        label: '大连'
                    }]
                }],
                value2: '',
                options3: [{
                    value: 'IT/互联网',
                    label: 'IT/互联网',
                    children: [{
                        value: '计算机软件',
                        label: '计算机软件',
                    }, {
                        value: '网络游戏',
                        label: '网络游戏',
                    }]
                }, {
                    value: '服务业',
                    label: '服务业',
                    children: [{
                        value: '酒店',
                        label: '酒店'
                    }, {
                        value: '旅游',
                        label: '旅游'
                    }]
                }],
                options4: [{
                    value: '',
                    text: '不限'
                }, {
                    value: '1k以下',
                    text: '1k以下'
                }, {
                    value: '2k-4k',
                    text: '2k-4k'
                }, {
                    value: '4k-6k',
                    text: '4k-6k'
                }, {
                    value: '6k-8k',
                    text: '6k-8k'
                }, {
                    value: '10-15k',
                    text: '10-15k'
                }, {
                    value: '15k以上',
                    text: '15k以上'
                }]
            }
        }
    }

</script>
<style scoped>
    .checkbox {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .block {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .block3 {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }


    .query-search {
        margin-top: 20px;
        padding-top: 20px;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
        background-color: white;
        width: 1200px;
        /*margin-left: 15%;*/
        height: 210px;
    }

    .query-color {
        display: flex;
        flex-direction: row;
        justify-content: center;

        padding-top: 10px;
        padding-bottom: 10px;
        width: 100%;
        background-color: #F3F5F8;
    }

    .showjob-color {
        display: flex;
        flex-direction: row;
        justify-content: center;
        background-color: #F3F5F8;
        width: 100%;
        padding-bottom: 15px;
    }

    .showjob {
        width: 1200px;
        /*margin-left: 15%;*/
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
        background-color: white;
    }

</style>
